<template>
  <!-- 出具优先权证明文件申请书 -->
  <div>
    <div class="total">
      <h1>出具优先权证明文件申请书</h1>
      <el-form align="left" label-width="200px" size="mini" class="form">
        <div class="apply">
          <el-form-item label="申请人名称 :">
            <span>{{record.appNameCn}}</span>
          </el-form-item>
          <el-form-item label="申请人地址 :">
            <span>{{record.appAddCn}}</span>
          </el-form-item>
        </div>
        <el-form-item label="邮政编码 :">
          <span>{{record.postCode}}</span>
        </el-form-item>
        <el-form-item label="联系人 :">
          <span>{{record.contacts}}</span>
        </el-form-item>

        <el-form-item label="邮箱 :">
          <span>{{record.email}}</span>
        </el-form-item>

        <el-form-item label="电话 :">
          <span>{{record.phone}}</span>
        </el-form-item>
        <el-form-item label="代理机构名称 :">
          <span>{{record.deptName}}</span>
        </el-form-item>
        <div class="Number">
          <el-form-item label="商标申请号 :">
            <span>{{record.appNum}}</span>
          </el-form-item>
        </div>

        <el-row>
          <el-col style="margin-bottom=10px">
            <el-form-item label="营业执照:">
              <imgshow>
                <img style="margin-bottom:10px;" :src="this.mconfig.host+record.busimg" alt />
              </imgshow>
            </el-form-item>
            <el-form-item
              style="margin:10px 0px;"
              label="身份证（正反面）:"
              v-if="record.idcardface==''?false:true"
            >
              <imgshow>
                <img :src="this.mconfig.host+record.idcardface" alt />
              </imgshow>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item class="mar" label="网上申请书 :">
            <imgshow>
              <span>
                <img :src="imgURL(record.qrfile)" />
              </span>
            </imgshow>
          </el-form-item>
        </el-row>

        <!--<el-row v-if="record.otherfile != []">-->
        <el-row v-if="record.otherfile.length>0">
          <el-form-item class="mar" label="其他附件 :">
            <imgshow v-for="(item,index) in record.otherfile" :key="index">
              <span>
                <img :src="imgURL(item)" />
              </span>
            </imgshow>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 签字/章戳 -->
      <!-- <div class="signs">
        <div class="sign">
          <div>
            <span>申请人章戳 (签字) :</span>
          </div>
          <div>
            <span>代理机构章戳 :</span>
          </div>
        </div>
        <div class="agent">
          <p>代理人签字 :</p>
        </div>
        <p class="careful">注：请 按 说 明 填 写</p>
      </div>-->
    </div>
  </div>
</template>
<script>
import imgshow from "../common/imgshow";
import proAppend from "../common/proAppend";
export default {
  components: {
    imgshow,
    proAppend,
  },
  name: "businessForm21",
  data() {
    return {
      right: "right",
      record: {
        email: "",
        qrfile: "",
        appNameCn: "", //  申请人名称
        appAddCn: "", //  申请人地址
        postCode: "", //  邮政编码
        contacts: "", //  联系人
        phone: "", //  电话
        deptName: "", // 代理机构名称
        appNum: "", //  商标申请号/注册号
        otherfile:[]
      },
    };
  },
  methods: {
    imgURL(_url) {
      var newUrl = this.mconfig.host + _url;
      return newUrl;
    },
    //接口获取到数据
    interface() {
      this.$http
        .get("/trademark/proporda/findByIdDetl", {
          params: {
            id: this.$route.query.id,
          },
        })
        .then((response) => {
          if (response.data.code == 200) {
            let resData = response.data.data.data;
            // let resAppend = response.data.data.append;

            this.record.appNameCn = resData.appName; // 申请人名称
            this.record.appAddCn = resData.busAddress; // 申请人地址（中文）
            this.record.qrfile = resData.qrfile;
            this.record.postCode = resData.postCode; //邮政编码
            this.record.contacts = resData.contacts; //联系人
            this.record.phone = resData.phone; //电话
            this.record.email = resData.email;
            this.record.deptName = resData.deptName; // 代理机构名称
            this.record.appNum = resData.appNum; // 商标申请号
            this.record.otherfile = JSON.parse(resData.otherfile);

            this.record.idcardimg = resData.idcardimg; // 	身份证正面
            this.record.idcardface = resData.idcardface; // 	身份证反面
            this.record.busimg = resData.busimg; // 	营业执照
          }
        })
        .catch((err) => {});
    },
  },
  mounted() {
    this.interface();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.mar {
  margin-top: 10px;
}
.total {
  width: 1200px;
  margin: 0 auto;
}
.total h1 {
  padding: 30px 0;
  margin-left: 260px;
  font-weight: 500;
  font-size: 30px;
}
.el-form {
  margin-left: 180px;
}
.total div {
  margin-bottom: 0;
}
/* .total .apply {
  margin-bottom: 30px;
}
.total .Number {
  margin: 30px 0 30px 0;
} */

/* 签字 */
.signs {
  margin-top: 150px;
}

.sign div {
  width: 300px;
  margin: 15px;
  margin-left: 80px;
}
.sign div span {
  color: #000;
}
/* 代理人 */
.signs .agent {
  margin-top: 80px;
  margin-right: 410px;
  text-align: right;
}
.signs .careful {
  margin-top: 100px;
  margin-left: 310px;
  color: #999;
}
.trade {
  margin: 5px 0px;
}
</style>
